<template>
  <view class="page">
    <!-- 背景装饰 -->
    <view class="bg-circle top"></view>
    <view class="bg-circle bottom"></view>

    <view class="card">
      <view class="title">公务用车申请</view>

      <!-- 账号 -->
      <view class="input-box">
        <text class="label">账号</text>
        <input v-model="form.username" placeholder="请输入账号" />
      </view>

      <!-- 密码 -->
      <view class="input-box">
        <text class="label">密码</text>
        <input password v-model="form.password" placeholder="请输入密码" />
      </view>

      <!-- 角色选择 -->
      <view class="role-box">
        <text class="label">选择角色</text>
        <radio-group @change="onRoleChange">
          <label>
            <radio value="user" :checked="form.role === 'user'" color="#00BFFF" />
            <text>用户</text>
          </label>
          <label>
            <radio value="driver" :checked="form.role === 'driver'" color="#00BFFF" />
            <text>司机</text>
          </label>
        </radio-group>
      </view>

      <button class="login-btn" @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script>
import {driverBar, userBar} from '@/utils/tabBar.js'
export default {
  data() {
    return {
      form: {
        username: '用户测试1',
        password: '123456',
        role: 'user'
      }
    };
  },
  methods: {
    onRoleChange(e) {
      this.form.role = e.detail.value;
    },
    async handleLogin() {
      if (!this.form.username || !this.form.password) {
        uni.showToast({ title: '账号或密码不能为空', icon: 'none' });
        return;
      }
     uni.showLoading({ title: '登录中...' });
		// 请求登录
	 const login_data =  await uni.$http.post('/sys/user/wxLogin', this.form)
		
		console.log(login_data.data.code)
		if(login_data.data.code === 20000){
			// 存储token
			const authorization = login_data.data.data.token;
			uni.setStorageSync("authorization", authorization);
			
			// 以 App.vue 为例
			uni.connectSocket({
				url: 'ws://192.168.1.117:9999/ws?authorization='+authorization,   // ① 用局域网 IP
				success: () => console.log('ws 连接已发起')
				});
			
			uni.onSocketOpen(() => console.log('ws 已打开'));
			
			
			
			// 获取动态路由
			if(this.form.role == "driver"){
				this.$store.dispatch('changeTabbar', driverBar);
				uni.switchTab({
				  url: '/pages/task/task'
				});
			}else{
				this.$store.dispatch('changeTabbar', userBar);
				// 跳转
				uni.switchTab({
				  url: '/pages/index/index'
				});
			}
			
		
		}
    },
	
	async getUserInfo(){
		 const user_data =  await uni.$http.get("/sys/user/info")
		 
		
		if(user_data.data.code  === 20000){
	
			if(user_data.data.data.role.name == "driver"){
				 this.$store.dispatch('changeTabbar', driverBar);
				 uni.switchTab({
				   url: '/pages/task/task'
				 });
			}else{
				this.$store.dispatch('changeTabbar', userBar);
				// 跳转
				uni.switchTab({
				  url: '/pages/index/index'
				});
			}
			
			
		}
	}
  },
  
  created(){
	  this.getUserInfo()
  }
};
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  background: linear-gradient(135deg, #87CEEB, #E0F7FF);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.top {
  top: -100rpx;
  left: -100rpx;
  width: 300rpx;
  height: 300rpx;
}

.bottom {
  bottom: -150rpx;
  right: -100rpx;
  width: 400rpx;
  height: 400rpx;
}

.card {
  width: 85%;
  max-width: 600rpx;
  padding: 60rpx 40rpx;
  border-radius: 24rpx;
  background: #ffffff;
  box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 44rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 50rpx;
  text-align: center;
}

.input-box {
  margin-bottom: 30rpx;

  .label {
    display: block;
    font-size: 28rpx;
    color: #555;
    margin-bottom: 10rpx;
  }

  input {
    height: 90rpx;
    padding: 0 20rpx;
    border: 1px solid #ccc;
    border-radius: 12rpx;
    font-size: 30rpx;
  }
}

.role-box {
  margin-bottom: 40rpx;

  .label {
    display: block;
    font-size: 28rpx;
    color: #555;
    margin-bottom: 10rpx;
  }

  radio-group {
    display: flex;
    gap: 40rpx;

    label {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #333;
    }

    radio {
      margin-right: 10rpx;
    }
  }
}

.login-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(90deg, #00BFFF, #87CEFA);
  color: #fff;
  font-size: 34rpx;
  border: none;
  border-radius: 12rpx;
}
</style>